<!DOCTYPE html>
<html>
<head>		
	<meta http-equiv="content-type"content="text/html;charset=utf-8">
	<title>时间轴</title>
	<style>
	*{margin:0;padding:0;}
	ul{list-style:none;}
	ul{margin:100px;border-left:4px solid gray;}
	li{margin-left:6px;}
	span{padding-left:5px;font-size:12px;line-height:20px;color:#555;}
	li:hover span {color:#ff6600;}
	li:hover b {border:2px solid #ff6600;}
	p{padding-left:15px;font-size:14px;line-height:25px;}
	b{width:8px;height:8px;background:#fff;border:2px solid #555;margin:5px;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;display:inline-block;margin-left:-14px;float:left;}/*必须使用浮动，才能在一行上*/
	
	</style>
</head>
<body>
	<ul>
		<li><b></b><span>2016.8.1</span><p>开始跑步</p></li>
		<li><b></b><span>2016.8.1</span><p>跑了1000米</p></li>
		<li><b></b><span>2016.8.2</span><p>跑了1500米</p></li>
		<li><b></b><span>2016.8.3</span><p>跑了2000米</p></li>
		<li><b></b><span>2016.8.4</span><p>跑了2800米</p></li>
	</ul>
</body>
</html>
